<template>
  <div class="wrapper">
    <div class="form-container">
      <div v-show="cciShow">
        <div class="wrapper-inner">
          <div class="form">
            <div class="form-item">
              <div class="title">你的身份是：</div>
            </div>
            <hr>
            <div class="form-item">
              <el-radio v-model="type_id" label="3">我是买家</el-radio>
            </div>
            <div class="form-item">
              <el-radio v-model="type_id" label="2">我是卖家</el-radio>
            </div>
            <div class="form-item">
              <el-radio v-model="type_id" label="1">我是供货商</el-radio>
            </div>
            <div class="form-item">
              <el-button type="primary" @click="cciShow=false" style="width: 100%">下一步</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-show="!cciShow">
        <div class="wrapper-inner">
          <div class="form">
            <div style="height: 60px">
              <div class="title">完善注册信息</div>
            </div>
            <hr>
            <div class="form-item" style="height: 55px">
              <div>用户名*:</div>
              <el-input class="input" v-model="username" placeholder="username..."></el-input>
            </div>
            <div class="form-item" style="height: 55px">
              <div>密码*:</div>
              <el-input class="input" v-model="password" placeholder="password..." show-password></el-input>
            </div>
            <div class="form-item" style="height: 55px">
              <div>重复密码*:</div>
              <el-input class="input" v-model="passwordRepeat" placeholder="repeat password..." show-password></el-input>
            </div>
            <div class="form-item" style="height: 55px">
              <div>邮箱:</div>
              <el-input class="input" v-model="emailAddress" placeholder="E-mail..."></el-input>
            </div>
            <div class="form-item" style="height: 55px">
              <el-button type="primary" @click="onRegister()" style="width: 100%">下一步</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-image: url('../assets/LowBay_login_background.jpg');
  background-size: cover;
}
.form-container {
  width: 35%;
  height: 60%;

  background-image: url("../assets/LowBay_login_background_TextItem_regular(1).png");
  opacity: 0.9;
}
.wrapper-inner{
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-image: none;
}
.form{
  width: 80%;
  height: 80%;
  margin-top: 50px;
}
.form-item{
  height: 60px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title{
  font-weight: bold;
  font-size: 30px;
}
hr{
  margin-bottom: 40px;
  height: 3px;

  background-color: black;
  border: none;
}
.input{
  width: 75%;
}
</style>

<script>
export default {
  name: 'regist',
  data() {
    return {
      cciShow:true,
      type_id:Number,
      username:'',
      password:'',
      passwordRepeat:'',
      emailAddress:'',

    }
  },
  methods: {
    onRegister(){
      let validate=()=>{
        return new Promise((resolve, reject) => {
          if (this.password!==this.passwordRepeat){
            reject('两次密码输入不一致！')
          }
          if (this.emailAddress===''||this.username===''||this.password===''){
            reject('信息尚未输入完成！')
          }
          resolve();
        })
      }
      validate().then(()=>{
        //成功跳转login
        let obj={
          user_account: this.username,
          type_id:this.type_id,
          login_password: this.password,
          email: this.emailAddress
        }
        this.$store.dispatch('user/register',obj).then(()=>{
          //注册成功跳转login
          this.$message.success('注册成功！');
          setTimeout(()=>{
            this.$router.push('/login');
          },500)
        }).catch((e)=>{
          //处理post注册的error
          this.$message.error('用户名已使用！');
        })
      }).catch((e)=>{
        //处理validate的error
        this.$message.error('校验失败，请正确输入！');
      })

    }
  },
  mounted() {

  },
  created() {

  }
}
</script>
